<%- include ('../public/page_header.html') %>
<div class="">
  <ol class="breadcrumb">
    <li>轮播图列表</li>
  </ol>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>分类</th>
        <th>名称</th>
        <th class="text-center">图片</th>
        <th>跳转地址</th>
        <th>排序</th>
        <th>状态</th>
        <th class="text-center">操作</th>
      </tr>
    </thead>
    <tbody>
      <%for(var i=0;i<list.length;i++) {%>
        <tr>
          <td class="text-center">
            <%if(list[i].type == 1){%>
              <p class="text-primary">网站</p>
            <%} else if (list[i].type == 2) {%>
              <p class="text-secondary">APP</p>
            <%} else if (list[i].type == 3) {%>
              <p class="text-secondary">小程序</p>
            <%} else {%>
            <%}%>
          </td>
          <td><%=list[i].title%></td>
          <td class="text-center">
            <%if(list[i].focus_img) {%>
            <img src="\<%=list[i].focus_img%>" width="80"/>
            <%}else{%>
              -
            <%}%>
          </td>
          <td><%=list[i].link%></td>
          <td class="text-center">
            <%=list[i].sort%>
          </td>
          <td class="text-center">
            <%if(list[i].status == 1){%>
              <p class="text-primary">on</p>
            <%} else {%>
              <p class="text-secondary">off</p>
            <%}%>
          </td>
          <td class="text-center">
            <button type="button" class="btn btn-primary btn-sm"><a href="/admin/focus/edit?id=<%=list[i]._id%>" style="color: #fff;">编辑</a></button>
            <button type="button" class="btn btn-danger btn-sm btn-remove" data-toggle="modal" data-target="#exampleModal" data-id="<%=list[i]._id%>" >删除</button>
        </tr>
      <%}%>
    </tbody>
  </table>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">确定要删除吗？</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <!-- <div class="modal-body">
          ...
        </div> -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="focus-confirm">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 1055; right: 0; bottom: 0;display: none;">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>
<script>

  var id = ''
  $('.btn-remove').click(function() {
    id = $(this).data('id')
    console.log(id)
  })
  $('#focus-confirm').click(function() {
    $.ajax({
      method: 'get',
      url: '/admin/focus/delete',
      data: {
        id
      },
      success: function(res) {
        console.log(res)
        if(res && res.code === 200) {
          $('#liveToast').toast('show')
          // 刷新页面
          setTimeout(()=>{
            window.location.reload()
          }, 1000)
        }
      },
      error: function(error) {
        $('#liveToast').toast('show')
        console.log(error)
      }
    })
  })
</script>
</body>
</html>